<template>
    <a-spin :loading="loading" style="width: 100%">
        <a-card :bordered="false" :style="cardStyle">
            <div class="content-wrap">
                <div class="content">
                    <a-statistic
                        :title="title"
                        :value="+data[valueKey]"
                        :value-from="0"
                        :precision="precision"
                        format=""
                        animation
                        show-group-separator
                    />
                    <div v-if="desc" class="desc">
                        <a-typography-text type="secondary" class="label">
                            {{ desc }}
                        </a-typography-text>
                        <a-typography-text type="danger">
                            {{ data[growthKey] }}
                            <icon-arrow-rise />
                        </a-typography-text>
                        <a-typography-text type="danger">
                            {{ data[lossKey] }}
                            <icon-arrow-down />
                        </a-typography-text>
                    </div>
                </div>
            </div>
        </a-card>
    </a-spin>
</template>

<script lang="ts" setup>
    import { PropType, CSSProperties } from 'vue';

    defineProps({
        title: {
            type: String,
            default: '',
        },
        desc: {
            type: String,
            default: '',
        },
        data: {
            type: Object,
            default: () => ({}),
        },
        precision: {
            type: Number,
            default: 2,
        },
        valueKey: {
            type: String,
            default: 'value',
        },
        growthKey: {
            type: String,
            default: 'growth',
        },
        lossKey: {
            type: String,
            default: 'loss',
        },
        cardStyle: {
            type: Object as PropType<CSSProperties>,
            default: () => {
                return {};
            },
        },
        loading: {
            type: Boolean,
            default: false,
        },
    });
</script>

<style scoped lang="less">
    :deep(.arco-card) {
        border-radius: 4px;
    }

    :deep(.arco-card-body) {
        width: 100%;
        height: 134px;
        padding: 0;
    }

    .content-wrap {
        width: 100%;
        padding: 16px;
        white-space: nowrap;
    }

    :deep(.content) {
        float: left;
        width: 108px;
        height: 102px;
    }

    :deep(.arco-statistic) {
        .arco-statistic-title {
            font-weight: bold;
            font-size: 16px;
            white-space: nowrap;
        }

        .arco-statistic-content {
            margin-top: 10px;
        }
    }

    .chart {
        float: right;
        width: calc(100% - 108px);
        height: 90px;
        vertical-align: bottom;
    }

    .label {
        padding-right: 8px;
        font-size: 12px;
    }
</style>
